<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->

    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/about.css"><!-- 基本样式 -->
    <script src="js/common.js"></script>
    <title>关注我的</title>
    <style>
        a{
            color: #0C0C0C;
        }
        .weui-loadmore {
            margin: 0 auto;
        }.wrap{
             overflow-y: scroll;
         }
        .spinner{width:20px;height:20px;position:fixed;z-index:1002;top:50%;margin-top:-10px;left:50%;margin-left:-10px}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#ff536a;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}#loading .mask{position:fixed;width:100%;background-color:#fff;top:0;left:0;height:100%;z-index:1001}
    </style>
</head>
<body>
<div id="loading">
    <div class="mask"></div>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
    <div class="wrap" onscroll="gcscroll(this)">
        <div class="activitynav">
            <ul>
                <li style="border-right:1px solid #dedede;" >
                    <a href="myFocusingle.html">我关注的</a>
                </li>
                <li class="activitynav-active" >
                    <a href="Focuspeople.html">关注我的</a>
                </li>
            </ul>
        </div>
        <!-- 头部导航-e-->
       <div id="list"></div>
        <div class="nmts">你还没有关注别人哦~快去关注吧~~</div>
    </div>
    <div class="weui-loadmore">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
    <script src="js/jquery/jquery-2.2.4.min.js"></script>
    <script src="js/utils.js"></script>
    <script >
        Utils.historyBack(function () {
            window.location.href = '/mine.html';
        });
        //user/get_follow_community
        var pages=0;
        var cont=1;
        var pageSize=1;
        var timev=Math.floor(new Date().getTime()/1000);
        $(".wrap").css("height",$(window).height());
        getlist();
        function getlist() {
            $.ajax({
                type : "GET",
                url : getRequestUrl("/user/get_follow_user"),
                data:{
                    timestamp:timev,
                    search_type:2,
                    page_num:cont,
                    page_size:pageSize
                },
                success : function(datas) {
                    console.log(datas);
                    pages=datas.response_params.total_cnt;
                    if(pages>0){
                        $(".nmts").hide();
                    }
                    var arr=datas.response_params.result;
                    var strs="";
                    $.each(arr,function (i,el) {
//                        function imglist() {
//                            var imgs="";
//                            $.each(el.portraits,function (i,e) {
//                                imgs+=`<li>
//                                <img src=`+e+`>
//                            </li>`
//                            })
//                            return imgs
//                        }
                        strs+=` <div class="followee" data-id=`+el.user_id+` onclick="getuseInfo(this)">
                                    <div class="followee-imgbox">
                                        <img src=`+el.portrait+`>
                                    </div>
                                    <div class="followee-message">
                                        <div class="followee-message-box">
                                            <h3>`+el.nick_name+`</h3>
                                            <span style="padding: 0">`+el.age+`岁</span>
                                            <span>`+el.height+`cm</span>
                                            <span>`+el.industry+`</span>
                                            <span>`+el.zodiac_sign+`</span>
                                        </div>
                                        <div class="followee-message-p">
                                            <p>`+el.profile+`</p>
                                        </div>
                                    </div>
                            </div>`
                    });
                    $(strs).appendTo("#list");
                    $("#loading").hide();
                    $(".weui-loadmore").hide();
                },
                error : function(err) {
                	dealCPErrorResponse(err);
                }
            });
        }

        function gcscroll(obj) {
            var $this =$(obj),
                viewH =$this.height(),//可见高度
                contentH =$this.get(0).scrollHeight,//内容高度
                scrollTop =$this.scrollTop();//滚动高度
            // console.log("可见高度"+viewH);
            // console.log("内容高度"+contentH);
            // console.log("滚动高度"+scrollTop);
            if(contentH - viewH - scrollTop <=1) { //到达底部100px时,加载新内容
                var nowpage=pages%pageSize==0?(pages/pageSize):(Math.floor(pages/pageSize)+1);
                if(nowpage===cont){
                    return false;
                    //getlist();
                }else {
                    $(".weui-loadmore").show();
                    cont+=1;
                    getlist();
                }

            }
        }
        function getuseInfo(obj) {
            var $this=$(obj);
            var id=$this.attr("data-id");
            window.location.href="Personal-information.html?userid="+id;
        }
    </script>
</body>
</html>